<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 800px;
			margin: 0 auto;
		}
		.box .div1{
			width: 500px;
			margin: 0 auto;
			height: 300px;
			text-align: center;
		}
		.box .div1 p input{
			width: 400px;
			height: 30px;
			border-radius: 10px;
			margin-left: 15px;
		}
		.box .div1 p{
			margin-bottom: 10px;
		}
		h1{
			text-align: center;
			line-height: 60px;
			}
			button{
				color:#fff;
				background: red;
				width: 50px;
				height: 30px;
				border-radius: 10px;
				margin: 0 10px;
			}

       .box .edit{
            position: absolute;
            left: 25%;
            top: 0;
            height: 900px;
            width: 800px;
            text-align: center;
            background: rgba(0,0,0,0.9);
            display: none;
        }
        .box .edit form{
            margin-top: 200px;
            
        }
        .box .edit form label{
        	color:#fff;
        }
         .box .edit form input{
			width: 400px;
			height: 30px;
			border-radius: 10px;
			margin-left: 15px;	
         }
        .box .div1 p .save{
        	width: 80px;
        	height: 40px;
        	background: red;
        	border-right: 10px;
        	color:#fff;
        }

        table{
        	text-align: center;
        }
       .edit form p .style1{
			color:#fff;
				background: red;
				width: 50px;
				height: 30px;
				border-radius: 10px;
				margin: 0 10px;
        }
	</style>
</head>
<body>
	<div class="box">
	<div class="div1">
		<h1>备忘录</h1>
		<p><label for="">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label> <input type="text" value="张三"class="name"></p>
		<p><label for="">电话号码:</label> <input type="text" value="112321313" class="tel"></p>
		<p><label for="">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</label> <input type="text" value="145255422@qq.com" class="email"></p>
		<p><input type="button"class="save" value="提交"></p>
	</div>
	<table width="800" border="1" align="center" cellpadding="0" cellspacing="0" align="center">
		 <thead>
	  <tr>
	    <td width="58">姓名</td>
	    <td width="244">电话号</td>
	    <td width="308">邮箱</td>
	    <td width="180">操作</td>
      </tr>
 	 </thead>
 	 <tbody>

        </tbody>		
	  </table>
	  <div class="edit">
        <form>
           <p><label for="">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label> <input type="text" class="editName"></p> 
            <p><label for="">电话号码:</label><input type="text" class="editTel"></p>
            <p><label for="">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</label><input type="text" class="editEmail"></p>
            <p><input type="button" class="btnSave style1" value="修改" >
            	<input type="button" class="btnClose style1" value="关闭" ></p>
        </form>

    </div>
</div>
</body>
<script src="jquer-3.2.1.min.js"></script>
<script>
	 $(function(){
            $('.save').on("click",function(e){
                e.preventDefault();
                var obj = {
                name:$('.name').val(),
                tel:$('.tel').val(),
                email:$('.email').val()
                }
                var all = localStorage.getItem('list');
                if(all){
                    all = JSON.parse(all);
                    all.push(obj);
                    localStorage.setItem('list',JSON.stringify(all));                    
                }else{
                  localStorage.setItem('list',JSON.stringify([obj]));

                }
                var str = "<tr>"+
                    "<td>"+obj.name+"</td>"+
                    "<td>"+obj.tel+"</td>"+
                    "<td>"+obj.email+"</td>"+
                    "<td>"+
                    "<button class='btnDelete'>删除</button>"+
                    "<button class='btnEdit'>修改</button>"
                    +"</td>"
                    "</tr>";

                $('table tbody').append(str);
                
                
            })
            
            getAll();
            function getAll(){
                var all = localStorage.getItem('list');
                all = JSON.parse(all);
                for(var i=0;i<all.length;i++){
                    var str = "<tr>"+
                    "<td>"+all[i].name+"</td>"+
                    "<td>"+all[i].tel+"</td>"+
                    "<td>"+all[i].email+"</td>"+
                    "<td>"+
                    "<button class='btnDelete'>删除</button>"+
                    "<button class='btnEdit'>修改</button>"
                    +"</td>"
                    "</tr>";

                    $('table tbody').append(str);

                }
            }
           
            $('table').on('click','.btnDelete',function(){
                var tr = $(this).parent().parent();
                var all = localStorage.getItem('list');
                all = JSON.parse(all);
                all.splice(tr.index(),1);
                localStorage.setItem('list',JSON.stringify(all));
                tr.remove();
            }).on('click','.btnEdit',function(){
                $('.edit').css({
                    "display":"block",
                })
                var tr = $(this).parent().parent();
                var all = localStorage.getItem('list');
                all = JSON.parse(all);
                var obj = all[tr.index()];
                //console.log(obj);
                obj.index = tr.index();
                sessionStorage.setItem('listEdit',JSON.stringify(obj));
                $('.editName').val(obj.name);
                $('.editTel').val(obj.tel);
                $('.editEmail').val(obj.email);
            })
           
            $('.btnSave').on('click',function(e){
                e.preventDefault();
                var all = localStorage.getItem('list');
                var obj1 = sessionStorage.getItem('listEdit');
                all = JSON.parse(all);
                obj1 = JSON.parse(obj1);
                var obj = {
                    name:$('.editName').val(),
                    tel:$('.editTel').val(),
                    email:$('.editEmail').val(),

                }
                console.log(obj1.index,obj1);
                all.splice(obj1.index,1,obj);
                localStorage.setItem('list',JSON.stringify(all));
                $('tbody tr').remove();
                getAll();
            })
       
            $('.btnClose').on('click',function(e){
                e.preventDefault();
                $('.edit').css({
                    "display":"none",
                })

            })
           
        })

</script>
</html>